<template>
  <!-- 课程列表 -->
  <view class="course-list">
    <view class="course-list-header">
      <up-tabs :list="courseTypeList" :current="currentTab" @click="typeClick"></up-tabs>
    </view>
    <view v-if="showCourseList">
      <view v-for="(course, index) in courseList" :key="index" class="course-item" @click="handleCourseTap(course)">
        <image :src="course.cover" class="course-image" mode="aspectFill" />

        <view class="course-content">
          <view class="course-title flex justify-between items-center">
            <view>{{ course.name }}</view>
            <text :class="['status-tag', 'status-tag'+course.status]">{{ getStatusText(course.status) }}</text>
          </view>
          <view class="course-desc">{{ course.refer }}</view>
          <view class="course-type flex justify-between items-center">
            <view class="flex items-center">
              <image class="img" :src="IMG_URL2+'peop/folder.svg'" mode="aspectFill" />
              <text class="pl-10">{{ course.categoryName }}</text>
            </view>
            <view class="arrow">
              <image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'"></image>
            </view>
          </view>
        </view>
      </view>
      <up-divider v-if="courseList.length>pageSize"  :text="loadStatus"></up-divider>
    </view>
    <view v-if="!showCourseList" class="flex justify-center items-center bg-white">
      <Empty :emptyInfo="emptyInfo" />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { IMG_URL2 } from "@/config";
import { studyApi } from "@/api";
import Empty from "@/components/empty.vue";
let courseTypeList = ref([])
let currentTab = ref(0)
let currentPage = ref(1)
let pageSize = ref(15)
let totalCount = ref(0)
let categoryId= ref(0)
let isTaskCheck = ref(false) // 	是否任务列表查询
let loadStatus =ref('正在加载中')
const courseList = ref([])
let showCourseList=ref(true)

const EmptyImage = ref(IMG_URL2 + "empty/normal.png");
const emptyInfo = ref({
  image: EmptyImage,
  width: 300,
  height: 300,
  tip: "暂无数据~"
});

const getStatusText = (status) => {
  const statusMap = {
    0: '未完成',
    1: '进行中',
    2: '已学习'
  }
  return statusMap[status]
}

const handleCourseTap = (course) => {
  uni.navigateTo({
    url: `/pages/trainingcenter/coursedetails?courseId=${course.courseId}&currentPage=${currentPage.value}&categoryId=${categoryId.value}`,
    fail(err) {
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}

function typeClick(item) {
  console.log('item', item);
  currentTab.value = item.index
  categoryId.value = item.courseCategoryId
  currentPage.value=1
  showCourseList.value = true
  getData(1)
}

const getOurseType = () => {
  // 返回 Promise
  return studyApi.STUDYGETALLCATEGORY().then((res) => {
    if (res.code == 200) {
      courseTypeList.value = res.result
      courseTypeList.value.unshift({
        courseCategoryId: 0,
        name: '全部'
      })
      categoryId.value = res.result[0].courseCategoryId
      return res // 返回结果，让 Promise 链可以继续
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "none",
        duration: 1000
      });
      return Promise.reject(res.errMsg) // 错误情况返回 rejected promise
    }
  });
}
const getData = (type) => {
  let params={
    currentPage:currentPage.value,
    isTaskCheck:isTaskCheck.value,
    pageSize:pageSize.value,
  }
  if(categoryId.value!=0){
    params.categoryId=categoryId.value
  }
  return studyApi.STUDYGETCOURSEORTASKLIST(params).then((res) => {
    if (res.code == 200) {
      if(type == 1) {
        courseList.value = res.result.data
        totalCount.value = res.totalCount
        if(res.result.data.length == 0){
          showCourseList.value = false
        }
      } else {
        courseList.value = courseList.value.concat(res.result.data)
      }
    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  })
}
onLoad( () => {


});
onShow(async () => {
  getOurseType()
  getData(1)
});
// 触底加载
onReachBottom(() => {
  console.log("触底加载");
  if (courseList.value.length >= totalCount.value) {
    loadStatus.value = "没有更多数据了";
    return
  }
  loadStatus.value = "正在加载中";
  currentPage.value++
  getData(2);
});
// 下拉刷新
onPullDownRefresh(() => {
  console.log("下拉刷新");
  // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
  loadStatus.value = "正在加载中";
  currentPage.value = 1
  totalCount.value = 0
  //isloading.value = false
  courseList.value = [];
  getData(1);
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 300);
});
</script>
<style lang="scss">
page {
  background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.course-list {

  .course-list-header{
    background: #fff;
    position: sticky;
    top: 0;
  }
}

.course-item {
  display: flex;
  background-color: #ffffff;
  margin: 24rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
}

.course-image {
  width: 200rpx;
  height: 200rpx;
  background-color: #f0f0f0;
  border-radius: 8rpx;
}

.course-content {
  flex: 1;
  padding: 24rpx;
  box-sizing: border-box;

}

.course-title {
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.9);
  margin-bottom: 10rpx;
  line-height: 48rpx;
}

.course-desc {
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 10rpx;
  line-height: 40rpx;
}

.course-type {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;

  .img {
    width: 28rpx;
    height: 28rpx;
  }
}

.course-type checkbox {
  transform: scale(0.8);
  margin-right: 10rpx;
}

.status-tag {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  box-sizing: border-box;
  border-radius: 4rpx;
}

.status-tag1 {
  color: rgba(214, 142, 68, 1);
}

.status-tag2 {
  color: rgba(43, 164, 113, 1);
}

.status-tag0 {
  color: rgba(214, 142, 68, 1);
}

.arrow {
  color: #999;
  font-size: 24rpx;
  .chevronright {
    width: 16px;
    height: 16px;
  }
}
</style>
